<template>
    <div>
      <h2>最新视频</h2>
      <el-row :gutter="20">
        <el-col v-for="video in videos" :key="video.id" :span="6">
          <VideoCard :video="video" />
        </el-col>
      </el-row>
    </div>
</template>

<script>
import VideoCard from '../video/videoCard.vue';
import axios from 'axios';

export default {
  name: 'HomeComponent', // 修改为多词名称
  components: {
    VideoCard,
    // userHome, // 移除未定义的组件
  },
  data() {
    return {
      videos: [],
    };
  },
  mounted() {
    this.fetchVideos();
  },
  methods: {
    fetchVideos() {
      axios.get('/api/videos')
        .then(response => {
          this.videos = response.data;
        })
        .catch(error => {
          console.error('Error fetching videos:', error);
        });
    },
  },
};
</script>

<style>
/* 样式 */
</style>
